Ajax এর কাজের বেসিক ধাপগুলো নিম্নে ধারাবাহিকভাবে ব্যাখ্যা করা হলো। এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে সার্ভারের সাথে ডেটা আদান-প্রদান করা হয় এবং ডায়নামিকভাবে ওয়েব পেজ আপডেট করা যায়:

Ajax এর কাজের বেসিক ধাপ:

১. XMLHttpRequest অবজেক্ট তৈরি করা:

Ajax এর মাধ্যমে সার্ভারের সাথে যোগাযোগ করার জন্য প্রথমে JavaScript এর XMLHttpRequest অবজেক্ট তৈরি করতে হয়। এটি Ajax রিকোয়েস্ট তৈরি ও ম্যানেজ করার জন্য ব্যবহৃত হয়।

var xhr = new XMLHttpRequest();

২. রিকোয়েস্ট টাইপ এবং ইউআরএল নির্ধারণ করা:

XMLHttpRequest অবজেক্ট তৈরি করার পরে, আমরা open() মেথড ব্যবহার করে রিকোয়েস্টের টাইপ (GET বা POST) এবং সার্ভারের URL নির্ধারণ করি। এটি জানায় যে, কোন URL থেকে ডেটা আনা বা কোন URL-এ ডেটা পাঠানো হবে।

xhr.open("GET", "data-url.json", true);

• "GET" বা "POST": HTTP রিকোয়েস্টের টাইপ।
• "data-url.json": সার্ভারের URL (যেখান থেকে ডেটা আনা হবে)।
• true: এটি নির্দেশ করে যে রিকোয়েস্টটি অ্যাসিনক্রোনাস (অ্যাসিনক) হবে।

৩. রিকোয়েস্ট পাঠানো:

রিকোয়েস্টের সেটআপ করার পরে, send() মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়। যদি এটি POST রিকোয়েস্ট হয়, তবে send() মেথডে ডেটা প্যারামিটার হিসেবে পাঠানো হয়।

xhr.send();

৪. সার্ভার রেসপন্স প্রসেস করা:

সার্ভার থেকে রেসপন্স পাওয়ার পরে, onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে সেই রেসপন্স হ্যান্ডেল করা হয়। আমরা চেক করি যে রিকোয়েস্টের রেডি স্টেট এবং HTTP স্ট্যাটাস কোড ঠিক আছে কিনা (রেডি স্টেট ৪ এবং স্ট্যাটাস ২০০ হওয়া প্রয়োজন)।

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // রেসপন্স ডেটা প্রসেস করা
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

• readyState:
  • 0: রিকোয়েস্ট তৈরি হয়নি।
  • 1: রিকোয়েস্ট সেটআপ হয়েছে (open() কল হয়েছে)।
  • 2: রিকোয়েস্ট সার্ভারে পাঠানো হয়েছে।
  • 3: রিকোয়েস্ট প্রসেসিং চলছে।
  • 4: রিকোয়েস্ট সম্পূর্ণ এবং রেসপন্স রেডি।
• status: সার্ভারের HTTP রেসপন্স স্ট্যাটাস কোড (২০০ মানে সফল)।

৫. DOM আপডেট করা:

সার্ভার থেকে ডেটা পাওয়ার পর, JavaScript ব্যবহার করে HTML DOM আপডেট করা হয়। আমরা এই ডেটা ব্যবহার করে পেজের বিভিন্ন এলিমেন্ট আপডেট করি, যেমন টেক্সট পরিবর্তন করা, নতুন কন্টেন্ট যোগ করা, বা ডায়নামিকভাবে টেবিল ভিউ আপডেট করা।

document.getElementById("content").innerHTML = data.content;

৬. এরর হ্যান্ডলিং (বিকল্প ধাপ):

Ajax রিকোয়েস্টের সময় কোনো এরর হলে, সেই এররকে হ্যান্ডেল করা জরুরি। আমরা onerror ইভেন্ট ব্যবহার করে এরর হ্যান্ডেল করতে পারি।

xhr.onerror = function() {
    console.error("Request failed.");
};

Ajax এর কাজের ধাপগুলোর সংক্ষেপ:

1. XMLHttpRequest অবজেক্ট তৈরি করা।
2. রিকোয়েস্ট সেটআপ করা (GET/POST এবং URL)।
3. রিকোয়েস্ট সার্ভারে পাঠানো।
4. সার্ভার রেসপন্স চেক করা এবং প্রসেস করা।
5. DOM আপডেট করা (ডায়নামিক কন্টেন্ট আপডেট)।
6. এরর হ্যান্ডলিং (যদি প্রয়োজন হয়)।

এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করা যায়।